import React, { FC, useEffect, useRef, useState, createContext } from 'react';
import { DatePicker, Form, Button } from 'antd';
import { BankOutView, BankBtnList, BankTable } from '../components';
import './index.css'
import locale from 'antd/es/date-picker/locale/zh_CN';
import type { ColumnsType } from 'antd/es/table';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import { HomeModal } from './HomeModal';
import { MessageModal } from '../components/MessageModal';

export type FieldType = { dataTime?: any };

const columns: ColumnsType<DataType> = [
  { title: '姓名', dataIndex: 'name' },
  { title: '年龄', dataIndex: 'age' },
  { title: '地址', dataIndex: 'address' },
];

const data: DataType[] = [
  { key: '1', name: "zhangsan", age: 18, address: "Beijing" },
  { key: '2', name: "lisi", age: 30, address: "shanghai" }
];

export const HomeModalView = createContext({});
const { RangePicker } = DatePicker;
const Home: FC = (props) => {
  const [form] = Form.useForm();
  const modalRefs = useRef();
  const tableRef = useRef();
  const [searchList, setSearchList] = useState([]);
  const [modalType, setModalType] = useState('');
  const [selectListItem, setSelectListItem] = useState({});
  const [modalFlg, setModalFlg] = useState(false);


  useEffect(() => {
    const fetchListArr = ['serverDate', 'currencyList'];
    Promise.all([]).then((result: any) => {
      const _res = fetchListArr.map((k, i) => ({ [`${k}`]: result[i] }))
      // 获取对应数据
      setSearchList(_res as never[]);
    });
  }, []);

  const handleClickSearchBtn = () => {
    // 点击查询操作
    form.validateFields().then((values: any) => {
      const start_date = dayjs(values.dataTime[0]).format("YYYYMMDD");
      const end_data = dayjs(values.dataTime[1]).format("YYYYMMDD");
      console.log(start_date, end_data, 'time');
    }).catch(err => {
      console.log("错误信息：", err);
    })
  }

  const handleClickOperateBtn = (type: string) => {
    setModalType(type);
    setModalFlg(!modalFlg);
    switch (type) {
      case '新增':
        // 新增逻辑编辑
        break;
      case "编辑":
        // 编辑逻辑编辑
        if ((tableRef.current as any).selectedRowKeys.length === 0) {
          return MessageModal('warning', '温馨提示', '请至少选择一条数据进行修改')
        }
        setSelectListItem({ item: (tableRef.current as any).selectedRowKeysItem });
        break;
      case "删除":
        // 删除逻辑编辑
        console.log(type);
        break;
      case "查看详情":
        // 查看详情逻辑编辑
        if ((tableRef.current as any).selectedRowKeys.length === 0) {
          return MessageModal('warning', '温馨提示', '请至少选择一条数据查看详情')
        }
        break;
      default:
        return;
    }
    (modalRefs.current as any).setIsModalOpen(true);
  }

  return (
    <BankOutView title="公告信息管理">
      <div className='search-view'>
        <Form
          name="basic"
          form={form}
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          // initialValues={{ remember: true }}
          autoComplete="off"
        >
          <Form.Item<FieldType>
            name="dataTime"
            rules={[{ required: true, message: '请选择起止时间!' }]}
          >
            <RangePicker className='search-view-left' locale={locale} />
          </Form.Item>
        </Form>
        <Button type='primary' className='search-btn' onClick={handleClickSearchBtn}>查询</Button>
      </div>
      <div className='operate-btn-list'>
        <BankBtnList
          btnList={["新增", "编辑", "删除", "查看详情"]}
          btnClickCallback={(type) => handleClickOperateBtn(type)}
        />
      </div>
      <div className='table-list'>
        <BankTable
          tableType='radio'
          ref={tableRef}
          columns={columns}
          data={data}
          paginationInfo={{ total: 120 }}
        />
      </div>
      <HomeModalView.Provider value={{ ...selectListItem, modalFlg, modalType }}>
        <HomeModal ref={modalRefs} type={modalType} />
      </HomeModalView.Provider>
    </BankOutView >
  )
}

export default Home;